<template>
	<div class='recommend'>
		<ul>
			<li 
				v-for='(item,index) in dataList'
			  :key='index'
				@click="goDetail(item.id)"
			>
				<h3>
					<img v-lazy="item.imgUrl" alt="">
				</h3>
				<div>
					<p>{{item.name}}</p>
					<p>{{item.content}}</p>
					<p>价格：¥{{item.pprice}}</p>
					<button>立即购买</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	props:{
		dataList: Array,
	},
	methods: {
		goDetail( id ) {
			this.$router.push({
				path: '/detail',
				query: {
					id
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
ul{
	display: flex;
	flex-wrap: wrap;
}
ul li{
	width: 50%;
	img{
		width: 100%;
		height: 100%;
	}
}
</style>
